<!--用户交互页面 包括登录 注册-->
<template>
    <div id="img-page" class="body-container web-img" style>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "UserInterface",
        mounted() {
            // 生成动态背景图片
            let r = Math.floor(Math.random() * 10 );
            if(r <= 3) {
                document.getElementById('img-page').style
                    .backgroundImage="url(" + require('../assets/imgs/back2.jpg') + ")";
            } else if(r <= 6) {
                document.getElementById('img-page').style
                    .backgroundImage="url(" + require('../assets/imgs/back1.jpg') + ")";
            } else {
                document.getElementById('img-page').style
                    .backgroundImage="url(" + require('../assets/imgs/back3.jpg') + ")";
            }
        },
        data() {
            return {
            }
        },
        methods: {}
    }
</script>

<style scoped>
    .body-container {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
    }

    .web-img {
        /*background-image: url("../assets/imgs/back2.jpg");*/
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        zoom: 1;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
</style>